<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:c="http://xmlns.jcp.org/jsp/jstl/core"
      xmlns:cc="http://xmlns.jcp.org/jsf/composite">
    <h:head>
        <title>Facelet Title</title>
        <script type="text/javascript">
            function changeShift(color){
                document.getElementById("acceptBox").style.display='none';
                document.getElementById("tradeBox").style.display='none';
                if (color == "orange") {
                    alert("Ett passbyte har redan skickats");
                }
                else if (color == "blue") {
                    document.getElementById("acceptBox").style.display='block';
                }
                else if (color == "white") {
                }
                else {
                    document.getElementById("tradeBox").style.display='block';
                }                
            }           
        </script>
        <h:outputStylesheet name="css/jsfcrud.css"/>
    </h:head>
    <h:body onload="document.getElementById('tradeBox').style.display='none';document.getElementById('acceptBox').style.display='none'">
        
        <!--<h:link outcome="/webpages/shifts/List" value="Show All Shifts Items"/>-->
        
        <center>
          
        <table>
            <h:form>
                <h:commandLink value="&lt;&lt;" actionListener="#{schema.setWeek(-1)}"></h:commandLink>
            </h:form>
            Vecka: #{schema.week}
            <h:form>
                <h:commandLink value="&gt;&gt;" actionListener="#{schema.setWeek(1)}"></h:commandLink>
            </h:form>
        </table><br/>
        
        <table class="kalender">
            <tr>
                <th></th>
                <th>Måndag</th>
                <th>Tisdag</th>
                <th>Onsdag</th>
                <th>Torsdag</th>
                <th>Fredag</th>
                <th>Lördag</th>
                <th>Söndag</th>
            </tr>
            <tr>
                <th>Lunch</th>
                <td>
                    <div onclick="changeShift('#{schema.color(0, 'Lunch', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(0, 'Lunch', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(0, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(0, 'Lunch', user.username)}"/>
                        </h:form>
                    </div>
                </td>
                <td>
                    <div onclick="changeShift('#{schema.color(1, 'Lunch', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(1, 'Lunch', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(1, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(1, 'Lunch', user.username)}"/>
                        </h:form>
                    </div>
                </td>
                <td>
                    <div onclick="changeShift('#{schema.color(2, 'Lunch', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(2, 'Lunch', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(2, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(2, 'Lunch', user.username)}"/>
                        </h:form>
                    </div>
                </td>
                <td>
                    <div onclick="changeShift('#{schema.color(3, 'Lunch', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(3, 'Lunch', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(3, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(3, 'Lunch', user.username)}"/>
                        </h:form>
                    </div>
                </td>
                <td>
                    <div onclick="changeShift('#{schema.color(4, 'Lunch', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(4, 'Lunch', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(4, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(4, 'Lunch', user.username)}"/>
                        </h:form>
                    </div>
                </td>
                <td>
                    <div onclick="changeShift('#{schema.color(5, 'Lunch', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(5, 'Lunch', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(5, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(5, 'Lunch', user.username)}"/>
                        </h:form>
                    </div>
                </td>
                <td>
                    <div id="6" onclick="changeShift(this.id, '#{schema.color(6, 'Lunch', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(6, 'Lunch', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(6, 'Lunch')}" style="height:50px;width:50px;background-color: #{schema.color(6, 'Lunch', user.username)}"/>
                        </h:form>
                    </div>
                </td>
            </tr>
            <tr>
                <th>Middag</th>
                <td>
                    <div onclick="changeShift('#{schema.color(0, 'Middag', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(0, 'Middag', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(0, 'Middag')}" style="height:50px;width:50px;background-color: #{schema.color(0, 'Middag', user.username)}"/>
                        </h:form>
                    </div>
                </td>
                <td>
                    <div onclick="changeShift('#{schema.color(1, 'Middag', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(1, 'Middag', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(1, 'Middag')}" style="height:50px;width:50px;background-color: #{schema.color(1, 'Middag', user.username)}"/>
                        </h:form>
                    </div>
                </td>
                <td>
                    <div onclick="changeShift('#{schema.color(2, 'Middag', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(2, 'Middag', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(2, 'Middag')}" style="height:50px;width:50px;background-color: #{schema.color(2, 'Middag', user.username)}"/>
                        </h:form>
                    </div>
                </td>
                <td>
                    <div onclick="changeShift('#{schema.color(3, 'Middag', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(3, 'Middag', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(3, 'Middag')}" style="height:50px;width:50px;background-color: #{schema.color(3, 'Middag', user.username)}"/>
                        </h:form>
                    </div>
                </td>
                <td>
                    <div onclick="changeShift('#{schema.color(4, 'Middag', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(4, 'Middag', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(4, 'Middag')}" style="height:50px;width:50px;background-color: #{schema.color(4, 'Middag', user.username)}"/>
                        </h:form>
                    </div>
                </td>
                <td>
                    <div onclick="changeShift('#{schema.color(5, 'Middag', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(5, 'Middag', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(5, 'Middag')}" style="height:50px;width:50px;background-color: #{schema.color(5, 'Middag', user.username)}"/>
                        </h:form>
                    </div>
                </td>
                <td>
                    <div onclick="changeShift('#{schema.color(6, 'Middag', user.username)}')" style="height:50px;width:50px;background-color: #{schema.color(6, 'Middag', user.username)}">
                        <h:form>
                            <h:commandButton onclick="" actionListener="#{schema.setDatumInClassDatum(6, 'Middag')}" style="height:50px;width:50px;background-color: #{schema.color(6, 'Middag', user.username)}"/>
                        </h:form>
                    </div>
                </td>
            </tr>
        </table>
        
        <div id="tradeBox">
            <h3>Skicka bytesförfrågan</h3>
            <p>Till:</p>
            <h:dataTable value="#{schema.displayEmployees(user.username)}" var="item">
                <h:column>
                    <h:form>
                        <h:commandButton actionListener="#{schema.sendMailAndUpdateDB(datum.date, user.username, item, datum.type)}" value="#{item}" onclick="window.location.reload()"/>
                    </h:form>
                </h:column>
            </h:dataTable>
        </div>
        
        <div id="acceptBox">
            <h3>Acceptera bytet?</h3>
                <h:form>
                    <h:commandButton actionListener="#{schema.acceptChangeShift(datum.date, user.username, datum.type)}" value="Ja" onclick="window.location.reload()"/>
                    <h:commandButton actionListener="#{schema.declineChangeShift(datum.date, user.username, datum.type)}" value="Nej" onclick="window.location.reload()"/>
                </h:form>
        </div>

        <div id="displayMessagesBox">
            <h3>Aktuella passbyten</h3>
            <h:dataTable value="#{schema.displayMessages()}" var="item">
                <h:column>
                    <h:outputText value="#{item}"/>
                </h:column>                
            </h:dataTable>
        </div>            

        </center>
        
    </h:body>

</html>

